import QtQuick 1.1
import com.nokia.meego 1.0
import com.nokia.extras 1.0

import REngine 1.0
import "Common.js" as COM
import "constants.js" as UI

RPage {
    id: chapterView

    property string fileName:""

    function chapterCount() {
        if (list.model != null) {
            console.log("model is not null, count", list.model.count)
            return list.model.count
        }
        else {
            console.log("model is null, return 0")
            return 0
        }
    }

    function load() {
        screen.allowedOrientations = engine.setting(REngine.Orientation)
//        listModel.clear()
        list.model = null
        noChapter.opacity = 0
        showBusyIndicator(true)
        engine.asyncGetChapters(chapterView.fileName)
    }

    function showBusyIndicator(show) {
        if (show) {
            busyIndicator.running = true
            busyIndicator.opacity = 1
        }
        else {
            busyIndicator.running = false
            busyIndicator.opacity = 0
        }
    }

    function delegateBackColor(index, pressed) {
        if (pressed) {
            return "grey"
        }
        else if (index == list.currentIndex) {
            return "lightgrey"
        }
        else {
            return "white"
        }
    }

    Rectangle {
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        color: "white"
        Rectangle {
            id: header
            anchors.top: parent.top
            width: parent.width
            height: 80
            color: "dodgerblue"
            Label {
                anchors.centerIn: parent
                font.bold: true
                font.pixelSize: 35
                color: "White"
                text: qsTr("Chapter Menu")
            }
        }


        BusyIndicator {
            id: busyIndicator
            anchors.centerIn: parent
            platformStyle: BusyIndicatorStyle { size: "large" }
        }

        ListView {
            id: list
            clip: true
            anchors.top: header.bottom
            anchors.bottom: parent.bottom
            //        anchors.fill: parent
            width: parent.width
//            model: ListModel {
//                id: listModel
//            }

            spacing: 2
            delegate:  Rectangle {
                clip: true
                height: UI.LIST_ITEM_HEIGHT
                width: parent.width

                Rectangle {
                    id: background
                    anchors.fill: parent
                    // Fill page porders
                    visible: mouseArea.pressed || index == list.currentIndex
                    color: delegateBackColor(index, mouseArea.pressed)
                }

                Text {
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.leftMargin: UI.INDENT_DEFAULT
                    elide: Text.ElideRight
                    text: modelData
                    textFormat: Text.PlainText
                    font.weight: Font.Bold
                    font.pixelSize: UI.LIST_TILE_SIZE
                    color: theme.inverted ? UI.LIST_TITLE_COLOR_INVERTED : UI.LIST_TITLE_COLOR
                    wrapMode: Text.Wrap
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignTop
                }

                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    onClicked: {
                        console.log("item clicked", index, modelData)
                        engine.saveLastPostionToChapter(fileName, index)
                        chapterView.pageStack.pop()
                    }
                }
            }

            Text {
                id: noChapter
                text: qsTr("No Chapter Info")
                anchors.centerIn: parent
                font.family: "Arial"
                font.pixelSize: 60
                color: "black"
//                z: 1
                opacity: 0.4
            }
        }
    }


    tools: ToolBarLayout {
        ToolIcon {
            id: backTool
            iconId: "toolbar-back"
            onClicked: {
                console.log("Back button clicked")
                chapterView.pageStack.pop()
            }
        }
    }

    onStatusChanged: {
        //reload chapter when viewable again
        if (status == PageStatus.Active) {
//            COM.disableDisplayBlank(true)
            load()
            window.showToolBar = true
        }
        else if (status == PageStatus.Activating) {
            noChapter.opacity = 0
        }
        else if (status == PageStatus.Deactivating) {
//            COM.disableDisplayBlank(false)
        }
    }

    Connections {
        target: engine
        onGetChapterResult: {
//            for (var i = 0; i < chapters.length; i++) {
//                console.log("add chapter", chapters[i])
//                listModel.append({"name": chapters[i]})
//            }
            list.model = chapters
            var currentChapter = engine.currentChapterIndex(chapterView.fileName)
            list.currentIndex = currentChapter
            list.positionViewAtIndex(currentChapter, ListView.Beginning)
            showBusyIndicator(false)
            noChapter.opacity = chapters.length > 0 ? 0 : 0.4
        }
    }

//    Connections {
//        target: platformWindow
//        onViewModeChanged: {
//            console.log("viewModeChanged", platformWindow.viewMode)
//            COM.handleViewModeVisibleChanged()
//        }
//        onVisibleChanged: {
//            console.log("visibleChanged", platformWindow.visible)
//            COM.handleViewModeVisibleChanged()
//        }
//    }
}
